<template>
	<view class="waiting-container">
		<image class="bg-image" src="/static/images/waiting-bg.png" mode="aspectFill"></image>
		<view class="content">
			<view class="title">正在为您寻找司机师傅...</view>
			<view class="timeline-container">
				<view class="timeline" :style="{ width: progressWidth + '%' }"></view>
			</view>
			<view class="time-text">预计等待时间：{{remainingTime}}秒</view>
		</view>
	</view>
</template>

<script>
	import selectCarApi from '@/api/selectCar.js'
	export default {
		data() {
			return {
				orderId:null,
				progressWidth: 0,
				remainingTime: 10,
				timer: null,
				startLat: null,
				startLng:null,
				endLat:null,
				endLng:null
			}
		},
		onLoad(options) {
			console.log(options,1111)
			//获取订单信息
			 if (options.orderId) {
			    this.orderId = options.orderId
			    console.log('获取到的信息订单Id:',  this.orderId);
				this.getOrder();
			}
			this.startProgress();
		},
		onUnload() {
			if(this.timer) {
				clearInterval(this.timer);
			}
		},
		methods: {
			// //得到订单信息
			getOrder(){
				selectCarApi.getOrderInfo(this.orderId).then(res =>{
					console.log(res);
					this.startLat = res.startLat /1000000;
					this.startLng = res.startLng / 1000000;
					this.endLat = res.endLat / 1000000;
					this.endLng = res.endLng / 1000000;
					console.log(this.startLat,this.startLng)
				}).catch(err=>{
					console.log(err)
				})
			},
			startProgress() {
				const totalTime = 180000; // 3分钟
				const interval = 1500; // 每1.5秒更新一次
				let elapsed = 0;
				
				this.timer = setInterval(() => {
					elapsed += interval;
					this.progressWidth = (elapsed / totalTime) * 100;
					this.remainingTime = Math.ceil((totalTime - elapsed) / 1000);
					//如果2分钟还没有司机接单，系统就自动派单
					if(elapsed >= 120000){
						console.log(this.orderId,222222222222);
						selectCarApi.automaticOrder(this.orderId).then(res => {
							console.log(res ,"res")
							if(res == '该订单已被司机接单！'){
								uni.redirectTo({
									url: `/pages/planRoute/planRoute?startLat=${this.startLat}&startLng=${this.startLng}&endLat=${this.endLat}&endLng=${this.endLng}&orderId=${this.orderId}`
								});
								return;
							}
							if(res == '当前暂无空闲司机或所有司机均已拒单!' || res == '当前暂无空闲司机!'){
								clearInterval(this.timer);
								//删除订单
								selectCarApi.deleteOrder(this.orderId).then(res => {
									uni.showToast({
										title: '暂无司机接单！',
										icon: 'none'
									});
								}).catch( err => {
										// console.log('获取失败:', err);
										uni.showToast({
											title: '删除失败',
											icon: 'none'
										});
								})
								uni.switchTab ({
									url:'/pages/firstPage/firstPage'
								})
							}
						}).catch(err=>{
							console.log(err)
						}).finally(()=>{
							return;
						})
					}else{
						console.log(this.orderId)
						//判断订单是否被抢单
						selectCarApi.isRob(this.orderId).then(res => {
							console.log(res ,"res");
							if(res === "已接单"){
								console.log(12300000000)
								clearInterval(this.timer);
								uni.redirectTo({
									url: `/pages/planRoute/planRoute?startLat=${this.startLat}&startLng=${this.startLng}&endLat=${this.endLat}&endLng=${this.endLng}&orderId=${this.orderId}`
								});
								return;
							}
						}).catch(err => {
							uni.showToast({
								title: '查询订单状态失效！',
								icon: 'none'
							});
						})
					}
					if (elapsed >= totalTime) {
						clearInterval(this.timer);
						//删除订单
						selectCarApi.deleteOrder(this.orderId).then(res => {
							uni.showToast({
								title: '暂无司机接单！',
								icon: 'none'
							});
							uni.switchTab ({
								url:'/pages/firstPage/firstPage'
							})
						}).catch( err => {
								// console.log('获取失败:', err);
								uni.showToast({
									title: '删除失败',
									icon: 'none'
								});
						})
						
					}
				}, interval);
			}
		}
	}
</script>

<style>
.waiting-container {
	position: relative;
	width: 100%;
	height: 100vh;
}

.bg-image {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.content {
	position: relative;
	z-index: 2;
	padding: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 600rpx;
}

.title {
	font-size: 36rpx;
	color: #333;
	margin-bottom: 60rpx;
}

.timeline-container {
	width: 80%;
	height: 10rpx;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 5rpx;
	overflow: hidden;
}

.timeline {
	height: 100%;
	background-color: #007AFF;
	transition: width 0.1s linear;
}

.time-text {
	margin-top: 30rpx;
	font-size: 28rpx;
	color: #666;
}
</style>
